﻿<template>
      <!--send box s-->
    <div class="letter_send_box" v-on:touchstart.self="hid_layer">
          <div class="friend_box">
            <div class="friend_box_header">
                  赠予好友
            </div>
            <div id="wrapper2" ref="contain" class="clearfix">
              <ul id="scroller" ref="el">
                 <li class="list_for_friend_box" v-for="info in firend_data" :key="info.index">
                   <img v-bind:src="info.friendUser.image" class="friend_box_img">
                   <div class="beizhu">
                     {{info.remark}}
                   </div>
                   <div v-bind:class="{check_box_act:info.click_check}" class="check_box" v-on:click="check_box_click(info.friendUser.id, info.index )"></div>
                 </li>
       
              </ul>
            </div>
            <div class="friend_last_box">
              <div>剩余<span>{{Exc_total}}</span></div>
              <div class="certain_btn_fri" v-on:click.self="hid_layer">
                确定
              </div>
            </div>
          </div>
    </div>
</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import "../../static/css/Letter/Certain_layer.css";
  import IScroll from "iscroll";
  //limit_Scroll
  import limit_scroll from "../../static/js/limit_scroll.js"
  import { Toast, Indicator } from 'mint-ui';
export default {
  name: 'hello',
  data () {
    return {
      get_layer_show: this.$store.getters.get_layer_show,
      hid_layer_data: true,
      user_id: "",
      list: "",
      friend_post_list:[],
      data_List:""
    }
  },
  props: ["f_hide_layer", "firend_data","Exc_total"],
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
    "Change_certain_layer"
  ]),
  methods: {
    //页面跳转
    //certain_jump: function () {
    //  this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    //},
    hid_layer: function () {
      //alert("hid_layer_data")
      this.$emit("newNodeEvent");
    },
    check_box_click: function (id, index) {
  
      this.$emit("get_mess",[id,index])
    }
  
  }
}
</script>
<style scoped>
  .certain_btn_fri {
    width: 3.65rem;
    height: 1.4rem;
    line-height:2.2;
    margin-top:0.2rem;
    border: 1px solid #e85454;
    color: #e85454;
    border-radius:1vw;
    text-align: center;
  }
  .friend_last_box {
    display: flex;
    justify-content: space-around;
    height: 3rem;
    line-height: 2rem;
    font-size: 0.7rem;
    color: #9f5c2f;
  } 
  .list_for_friend_box {
    padding-left: 7%;
    padding-right: 7%;
    display: flex;
    justify-content: space-around;
  }
  .friend_box_img {
    width: 2.15rem;
    height: 2.15rem;
    display: block;
    border-radius: 50%;
    border: 1px solid #9f5c2f;

  }
  .check_box {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1vw;
    border: 1px solid #9f5c2f;
    margin-top:0.3rem;
  }
  .check_box_act {
    background-color: #9cce9c;
  }
  .beizhu {
    margin-top:0.3rem;
    width: 50%;
    height: 1.5rem;
    border: 1px solid #9f5c2f;
    border-radius: 2vw;
    line-height: 1.6;
    font-size:0.8rem;
  }
  .friend_box_header {
    margin-top: 1.125rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #9f5c2f;
    text-align: center;
  }
  .letter_send_box {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    border: 0;
  }
  .friend_box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    height: 21.5rem;
    width: 76%;
    border-radius:2vw;
  }

  /*scroll s*/
  body {
    /* On modern browsers, prevent the whole page to bounce */
    overflow: hidden;
  }

  #wrapper2 {
    position: relative;
    width: 100%;
    height: 16.65rem;
    overflow: hidden;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
  }

  #scroller {
    overflow:scroll;
    width:100%;
    position: absolute;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  /*certain btn e*/
  /*scroll e*/
</style>


